import React, { useEffect, useState } from 'react'

export default function App() {
  const [count,setCount] = useState(0)
  const [isHot,setIsHot] = useState(true)

  //不写参数就是在第一次渲染时执行
  // useEffect(()=>{
  //   console.log('执行了');
  // })

  // 写参数就是state状态改变后渲染执行，和开始渲染时执行。可以写多个参数
  // useEffect(()=>{
  //   console.log('执行了');
  // },[count])

  //这里的卸载是在数字加完以后，上次被覆盖了就返回函数里执行语句，渲染后再打印执行了
  useEffect(() => {
    console.log("isHot执行了");
    return () => {
      console.log("isHot的Effect卸载函数" + count);
    }
  }, [isHot, count])

  return (
    <div>
      <h1>累加的数值是{count}</h1>
      <button onClick={()=>{setCount(count+1)}}>点击累加</button>
      <br />
      <br />
      <hr />
      <p>今天的天气真的是{isHot? '很好' : '很差'}</p>
      <button onClick={()=>{setIsHot(!isHot)}}>点击切换</button>
    </div>
  )
}
